<template>
  <div>
    <div style="width: 500px;margin: 0 auto">
      <el-input
        v-model="search"
        placeholder="输入接收者搜索"/>
    </div>
    <el-table border :data="tableData.filter(data => !search || data.recipient.toLowerCase().includes(search.toLowerCase()))">
      <el-table-column prop="recipient" label="接收者" width="150" align="center">
      </el-table-column>
      <el-table-column prop="money" label="转账金额（税后）" width="100" align="center">
      </el-table-column>
      <el-table-column prop="bandCard" label="银行卡号" width="250" align="center">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="200" align="center">
      </el-table-column>
      <el-table-column prop="explain" label="说明" width="150" align="center">
      </el-table-column>
      <el-table-column prop="Initiator" label="发起人" width="150" align="center">
      </el-table-column>
      <el-table-column prop="time" label="转账时间" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'saPay',
  data () {
    return {
      tableData: [
        {
          recipient: '王五1',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        },
        {
          recipient: '王五2',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        },
        {
          recipient: '王五3',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        },
        {
          recipient: '王五4',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        },
        {
          recipient: '王五5',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        },
        {
          recipient: '王五6',
          money: '5000',
          bandCard: '**** **** **** 1472',
          state: '成功',
          explain: '服务费',
          Initiator: '李二',
          time: '2021.10.02'
        }
      ],
      search: ''
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>
